<template>
	<view class="follow_t" @click="goTeacherDetail">
		<view class="box">
			<view class="content_box">
				<up-avatar size="60"
					:src="userInfo.teacher.avatar+ '?x-oss-process=image/resize,w_220,m_lfit/crop,g_north,h_180,w_180'"></up-avatar>
				<view class="content">
					<view class="name f-w-b">{{userInfo.teacher.name}}</view>
					<view class="sub-title">{{userInfo.teacher.label}}</view>
				</view>
			</view>
			<view @click.stop>
				<u-button v-if="!isFollow" text="✚关注" color="#E94359" :customStyle="{
										color: '#fff',fontWeight: 'bolder'
									}" @click="followClick" size="small"></u-button>
				<u-button v-else text="已关注" color="#A9A9A9" :customStyle="{
										color: '#fff',fontWeight: 'bolder'
									}" @click="followClick" size="small"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
	} from 'vue'
	import {
		addInterest,
		cancelInterest
	} from '@/api/teacher.js'
	let isFollow = ref(true)
	const props = defineProps({
		userInfo: Object,
	})

	function followClick() {
		isFollow.value = !isFollow.value
		if (isFollow.value) {
			//关注
			addInterest(props.userInfo.teacherId)
			return;
		}
		//取消关注
		cancelInterest(props.userInfo.teacherId)
	}
	/**
	 * 老师主页
	 */
	function goTeacherDetail() {
		uni.navigateTo({
			url: '/subPackages/teacher/index?userId=' + props.userInfo.teacher.userId
		})
	}
</script>

<style lang="scss">
	.follow_t {
		background-color: #fff;
		padding: 12px 10px;
		border-radius: 8px;
		margin-bottom: 10px;

		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 1;

			.content_box {
				display: flex;
				align-items: center;


				.content {
					margin-left: 10px;

					.name {
						font-size: 16px;
						margin-bottom: 5px;
					}

					.sub-title {
						color: #7d7e84;
						font-size: 12px;
					}
				}
			}

			.follow_btn {
				padding: 5px 20px;
				background-color: #f3f3f4;
				border-radius: 4px;
				font-size: 14px;
			}

			.bg-click {
				background: #c9134b;
			}
		}
	}
</style>